<template>
  <view class="page flexc">
    <view class="page-ctx flex1 over">
      <view class="product-info">
        <view class="product-item flex">
          <view class="poster-box">
            <image :src="product.image" mode="aspectFill"></image>
          </view>
          <view class="info">
            <view class="title-box">
              <view class="title">
                {{ product.title }}
              </view>
            </view>

            <view class="desc-box">
              <view class="desc ellipsis-1">
                {{ product.keyVals }}
              </view>
            </view>
            <view class="price-box flex-between">
              <view class="price-info">{{ product.priceSale || 0 }}积分</view>
              <text class="num">x {{ product.num }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="refund-info">
        <view class="refund-reason flex-between" @click="openReason()">
          <view class="label">退款原因</view>
          <view class="value flex">
            <view class="value-text ellipsis-1">
              {{ refund_reason || "请选择" }}
            </view>
            <image src="@/static/common/arrow.png"></image>
          </view>
        </view>

        <view
          v-if="refund_title == '仅退款' || refund_title == '退货退款'"
          class="refund-money flex-between">
          <view class="label">退款金额</view>
          <view class="label-tip">最多￥{{ maxPrice || 0 }}</view>
          <view class="value flex">
            <input
              v-model="refund_money"
              type="digit"
              value=""
              @input="inputRefundMoney"
              class="input"
              placeholder-class="input-p"
              placeholder="积分"
              :style="{ width: String(refund_money).length / 2 + 'em' }" />
            <text class="huobi">积分</text>
            <image src="@/static/common/edit.png"></image>
          </view>
        </view>

        <view
          v-if="refund_title == '换货'"
          class="refund-reason flex-between"
          @click="openGuige()">
          <view class="label">换新商品</view>
          <view class="value flex">
            <view class="value-text ellipsis-1">
              {{ exchange_guige || "请选择" }}
            </view>
            <image src="@/static/common/arrow.png"></image>
          </view>
        </view>

        <view v-if="refund_title == '换货'" class="addr-wrap">
          <view class="addr-item" @click="toChooseAddress()">
            <view class="addr-inner">
              <view class="addr-left">
                <view
                  class="info-box"
                  v-if="address_selected && address_selected.name">
                  <view class="user-info">
                    <text class="name">{{ address_selected.name }}</text>
                    <text class="phone">{{ address_selected.phone }}</text>
                    <!-- <text class="desc" v-if="address_selected.moren == 1">[默认地址]</text> -->
                  </view>
                  <view class="address-info">
                    {{ address_selected.full_addr }}
                    <view class="address-detail">
                      {{ address_selected.address }}
                    </view>
                  </view>
                </view>
                <view class="addr-empty" v-else>收货地址</view>
              </view>

              <view class="addr-right flex-center">
                <text v-if="!address_selected.id">请选择</text>
                <image src="@/static/payment/arrow.png"></image>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="feedback-info">
        <view class="main-title">上传描述和凭证</view>
        <view class="textarea-box">
          <textarea
            v-model="refund_remark"
            maxlength="200"
            :auto-height="true"
            value=""
            placeholder="补充描述，有助于商家更好的处理售后问题"
            placeholder-class="textarea-p" />
          <text class="statistice-count">{{ refund_remark.length }}/200</text>
        </view>

        <view class="upload-wrap flex">
          <view class="upload-list">
            <view
              class="upload-item"
              v-for="(item, index) in upload_pic_list"
              :key="index"
              @click="doPreview(item)">
              <view class="remove-box" @click.stop="doRemove(item, index)">
                <image src="@/static/review/remove.png" mode=""></image>
              </view>
              <view class="preview-box clip-item">
                <image :src="item" mode=""></image>
              </view>
            </view>

            <view
              class="upload-box column-flex-center"
              @click="doUpload()"
              v-if="upload_pic_list && upload_pic_list.length < 6">
              <view class="icon-box">
                <image src="@/static/image/upload.png" mode=""></image>
              </view>
              <!-- <view class="title">
								添加图片
							</view>
							<view class="tip" >
								（最多{{allowUploadNumber}}张）
							</view> -->
            </view>
          </view>
        </view>
      </view>

      <!-- <view class="return-info" v-if="refund_title == '退货退款'">
        <view class="store-address">
          <view class="tui-type">
            <text>退货方式</text>
            <text>自行寄回</text>
          </view>
          <view class="address">
            <text>商家地址</text>
            <view class="right">
              <view class="address-info">
                <view class="title">
                  {{ vuex_config.comAddress || "" }}
                </view>
                <view class="user">
                  <text>
                    {{ vuex_config.comTitle || "" }}
                    {{ vuex_config.comPhone || "" }}
                  </text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view> -->
    </view>

    <view class="page-foot">
      <view class="p-tip flex-between">
        <view class="flex">
          <text>共1件，退款总金额</text>
          <text class="p-y">￥100</text>
        </view>
        <view class="flex">
          <text class="p-y">金额明细</text>
          <image
            class="arr"
            src="@/static/image/u.png"
            mode="aspectFit"></image>
        </view>
      </view>
      <view class="btn flex-center btn-cancel" @click="doSubmit()">
        提交申请
      </view>
    </view>

    <refund_choose_reason_pop
      data-title="售后原因"
      ref="refund_choose_reason_pop"
      @confirm="confirmReason" />
    <refund_choose_guige_pop
      data-title="换货选择规格"
      ref="refund_choose_guige_pop"
      @confirm="confirmGuige" />

    <view class="q-pop" v-if="show">
      <u-popup
        :show="true"
        :overlay="true"
        mode="bottom"
        :closeable="false"
        :closeOnClickOverlay="false"
        round="16">
        <view class="q-pop-box flexc">
          <view class="q-t">退款金额明细</view>
          <view class="flex over">
            <scroll-view scroll-y="true" style="height: 100%">
              <view class="q-wrap">
                <view class="product-info">
                  <view class="product-item flex">
                    <view class="poster-box">
                      <image :src="product.image" mode="aspectFill"></image>
                    </view>
                    <view class="info">
                      <view class="title-box">
                        <view class="title">
                          {{ product.title }}
                        </view>
                      </view>

                      <view class="desc-box">
                        <view class="desc ellipsis-1">
                          {{ product.keyVals }}
                        </view>
                      </view>
                      <view class="price-box flex-between">
                        <view class="price-info">
                          {{ product.priceSale || 0 }}积分
                        </view>
                        <text class="num">x {{ product.num }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
          <view class="page-foot" style="background-color: #fff">
            <view class="p-tip flex-between">
              <view class="flex">
                <text>共1件，退款总金额</text>
                <text class="p-y">￥100</text>
              </view>
              <view class="flex">
                <text class="p-y">金额明细</text>
                <image
                  class="arr"
                  src="@/static/image/d.png"
                  mode="aspectFit"></image>
              </view>
            </view>
            <view class="btn flex-center btn-cancel" @click="doSubmit()">
              提交申请
            </view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import refund_choose_reason_pop from "@/components/refund/refund_choose_reason_pop.vue";
import refund_choose_guige_pop from "@/components/refund/refund_choose_guige_pop.vue";
export default {
  components: {
    refund_choose_reason_pop,
    refund_choose_guige_pop,
  },
  data() {
    return {
      orderId: "",
      productId: "",
      inventoryId: "",
      buyNumber: "", //购买数量
      type: "", //退换货类型(1-退款 2-退货退款 3-换货)
      refund_title: "", //

      product: {},
      upload_pic_list: [], //已上传图片链接
      allowUploadNumber: 6, //允许上传的最大图片数量
      maxPrice: 0,

      refund_reason: "",
      refund_money: "",
      refund_remark: "",

      focus: false,

      //换货信息
      exchange_products: [],
      exchange_guige: "",
      new_product: [],
      address_selected: {}, //地址
      show: false,
    };
  },
  computed: {
    refund_reasons() {
      return this.vuex_config.tuihuan_reason;
    },
  },

  onLoad(option) {
    this.orderId = option.orderId;
    // this.productId = option.productId
    // this.buyNumber = option.buyNumber
    this.inventoryId = option.inventoryId;
    this.type = option.type;
    this.refund_title = option.title;

    this.setView();
  },
  onShow() {
    console.log("page onShow", this.refund_title);
    if (this.refund_title == "换货") {
      this.query_address();
    }
  },

  methods: {
    setView() {
      this.query_order();
    },
    query_order() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "orders_detail",
          id: this.orderId,
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.product = data.products.find((v) => v.id == this.inventoryId);
          this.maxPrice = parseFloat(data.price);
          this.refund_money = this.maxPrice;

          if (this.refund_title == "换货") {
            this.query_exchange_products();
          }
        }
      });
    },

    //换货产品信息
    query_exchange_products() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "refund_showChangeProduct",
          inventoryId: this.inventoryId,
          productId: this.product.productId,
          num: this.product.num,
          priceSale: this.product.priceSale,
        },
      }).then((res) => {
        if (res.code == 200) {
          // let data = res.data;
          this.exchange_products = res.data;
        }
      });
    },

    query_address() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "userAddress_lists",
          page: 1,
          pageNum: 100,
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let list = res.data;
          list.forEach((v) => {
            v.full_addr = [v.country, v.province, v.city, v.area]
              .filter((v) => !!v)
              .join("-");
            // v.xing = v.name[0] || ''
          });

          let cache_address_id = uni.getStorageSync("cache_refund_address_id");
          console.log("缓存的地址id  cache_address_id", cache_address_id);
          let cache_index = list.findIndex((v) => v.id == cache_address_id);
          let default_index = list.findIndex((v) => v.moren == 1);

          if (cache_index > -1) {
            this.address_selected = list[cache_index];
          } else {
            uni.removeStorageSync("cache_address_id");
            if (default_index > -1) {
              this.address_selected = list[default_index];
            } else {
              this.address_selected = {};
            }
          }
        }
        this.hideLoading();
      });
    },

    doUpload() {
      this.doUploadFn();
      // util.handleUploadImage({
      // 	count: 6,
      // 	successCallback: (res) => {
      // 		// this.upload_image = res.data.path;
      // 		this.upload_pic_list.push(res.data)
      // 	}
      // });
    },

    // 上传图片
    doUploadFn() {
      // #ifdef H5
      this.do_h5_upload();
      // #endif

      // #ifndef H5
      this.do_mp_upload();
      // #endif
    },

    // H5环境上传图片
    do_h5_upload() {
      let count = this.allowUploadNumber - this.upload_pic_list.length;
      uni.chooseImage({
        count: count || 1,
        mediaType: ["image"], // 图片// ['image', 'video']
        sourceType: ["album", "camera"], // 从相册选择
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          console.warn("选择图片 success", res);

          // tempFilePaths  路径列表
          // tempFiles			文件列表
          res.tempFiles.forEach((file) => {
            this.$apiUpload({
              url: "/service.php",
              method: "post",
              data: {
                action: "index_localUpload",
                img: file.path,
                if_touxiang: 0,
              },
            }).then((res) => {
              if (res.code == 200) {
                let pic = res.data;
                this.upload_pic_list.push(pic);
              }
            });
          });
        },
      });
    },

    // 小程序环境上传图片
    do_mp_upload() {
      let count = this.allowUploadNumber - this.upload_pic_list.length;
      uni.chooseMedia({
        count: count || 1,
        mediaType: ["image"], // 图片// ['image', 'video']
        sourceType: ["album", "camera"], // 从相册选择
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          console.warn("选择图片 success", res);

          // tempFilePaths  路径列表
          // tempFiles			文件列表 【{tempFilePath: '临时路径'}】
          res.tempFiles.forEach((file) => {
            this.$apiUpload({
              url: "/service.php",
              method: "post",
              data: {
                action: "index_localUpload",
                img: file.tempFilePath,
                if_touxiang: 0,
              },
            }).then((res) => {
              if (res.code == 200) {
                let pic = res.data;
                this.upload_pic_list.push(pic);
              }
            });
          });
        },
      });
    },

    doPreview(pic) {
      uni.previewImage({
        urls: [pic],
      });
    },

    doRemove(item, index) {
      this.upload_pic_list.splice(index, 1);
    },

    openReason() {
      this.$refs.refund_choose_reason_pop.init();
      // this.show_reason = true
    },
    confirmReason(value) {
      this.refund_reason = value;
    },

    openGuige() {
      this.$refs.refund_choose_guige_pop.init(
        this.exchange_products,
        this.product
      );
    },
    confirmGuige(info, num) {
      console.log(info, "规格111");

      var new_product = [
        {
          inventoryId: info.id,
          productId: this.product.productId,
          num: num,
        },
      ];

      this.new_product = new_product;
      this.exchange_guige = info.keyVals;
    },

    inputRefundMoney(e) {
      console.log(e);
      console.log(e.detail.value);
      console.log("this.maxPrice", this.maxPrice);
      if (parseFloat(e.detail.value) > this.maxPrice) {
        this.$alert("退款金额不应高于" + this.maxPrice + "元");
        this.$nextTick(() => {
          this.refund_money = this.maxPrice;
        });
      }
      // if (this.refund_money > this.maxPrice) {
      // 	this.$alert('退款金额大于最大退款金额，请修改')
      // 	return;
      // }
    },

    doSubmit() {
      if (!this.refund_reason) {
        this.$alert("请选择退款原因");
        return;
      }
      if (!this.refund_money) {
        this.$alert("请输入退款金额");
        return;
      }
      if (this.refund_money > this.maxPrice) {
        this.$alert("退款金额不能超过最多金额");
        return;
      }

      if (!this.refund_remark) {
        this.$alert("请输入描述内容");
        return;
      }

      if (this.refund_title == "换货") {
        if (!this.address_selected.id) {
          this.$alert("请选择换货收货地址");
          return;
        }
      }

      this.mix_throttle(this.doSubmitFn);
    },

    doSubmitFn() {
      let images = this.upload_pic_list.join(",");
      let params = {
        action: "refund_add",
        orderId: this.orderId,
        inventoryId: this.inventoryId,
        type: this.type, //退换货类型(1-退款 2-退货退款 3-换货)
        num: this.product.num,
        reason: this.refund_reason,
        remark: this.refund_remark,
        images: images,
        money: this.refund_money,
        addressId: this.address_selected.id,
      };
      if (this.type == 3) {
        //如果是换货
        params.new_product = JSON.stringify(this.new_product);
        // params.num = this.new_product[0].num
        params.money = 0;
      }
      this.$log("表单提交", params);

      this.$api({
        url: "/service.php",
        method: "get",
        data: params,
      }).then((res) => {
        this.$alert(res);
        if (res.code == 200) {
          this.toRoute({
            path: "/refund-submit-success",
            query: {},
          });
        }
      });
    },

    //选择地址
    toChooseAddress() {
      this.toRoute({
        path: "/address-list",
        query: {
          from: "refund",
        },
      });
    },
  },
};
</script>

<style lang="scss"></style>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  .page-ctx {
    padding: 24rpx 32rpx;
    background: #f6f6f6;
  }

  .product-info {
    margin-bottom: 24rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .product-item {
    padding: 40rpx 24rpx;

    & + .product-item {
      border-top: 1rpx solid #eee;
    }

    .poster-box {
      width: 176rpx;
      height: 176rpx;
      border-radius: 8rpx;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .info {
      flex: 1;
      overflow: hidden;
      padding-left: 24rpx;

      .title-box {
      }

      .title {
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
      }

      .desc-box {
        margin-top: 4rpx;

        .desc {
          font-weight: 400;
          font-size: 24rpx;
          color: #000000;
        }
      }

      .price-box {
        margin-top: 18rpx;

        .price-info {
          font-weight: bold;
          font-size: 28rpx;
          color: #e23410;
        }

        .num {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #000000;
        }
      }
    }
  }

  .feedback-info {
    background: #ffffff;
    // box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.06);
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    margin-top: 16rpx;
    padding: 34rpx 24rpx 40rpx;

    .main-title {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
      margin-bottom: 34rpx;
    }
  }

  .textarea-box {
    margin-top: 20rpx;
    position: relative;

    .statistice-count {
      position: absolute;
      right: 24rpx;
      bottom: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #7d7d7d;
    }

    textarea {
      overflow: hidden;
      background: #ffffff;
      background: #f8f8f8;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      border: 1rpx solid transparent;

      padding: 16rpx 24rpx;
      padding-bottom: 50rpx;
      display: block;
      width: 100%;
      min-height: 280rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #333;
    }

    .textarea-p {
      padding-bottom: 50rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #7d7d7d;
    }
  }

  .upload-wrap {
    margin-top: 30rpx;
  }

  .upload-list {
    display: flex;
    flex-wrap: wrap;

    .upload-item {
      position: relative;
      width: 202upx;
      height: 202upx;
      margin-right: 20rpx;
      margin-bottom: 32rpx;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .remove-box {
        position: absolute;
        z-index: 10;
        top: -10rpx;
        right: -10rpx;

        image {
          width: 42rpx;
          height: 42rpx;
        }
      }

      .preview-box {
        width: 202upx;
        height: 202upx;
        background: #fff;

        image {
          width: 202upx;
          height: 202upx;
        }
      }

      .upload-box {
        width: 202upx;
        height: 202upx;
        background: #fff;

        &.shangchuan-box {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
        }

        .image-box {
          display: flex;
          justify-content: center;

          image {
            width: 48rpx;
            height: 42rpx;
          }
        }

        .text {
          margin-top: 16rpx;
          text-align: center;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 24rpx;
          color: #333333;
        }
      }
    }

    .upload-box {
      width: 202upx;
      height: 202upx;
      border: 1rpx solid #ddd;

      .icon-box {
        width: 202upx;
        height: 202upx;

        image {
          width: 202upx;
          height: 202upx;
        }
      }

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
      }

      .tip {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #c8c8c8;
      }
    }
  }

  .refund-info {
    width: 100%;
    overflow: hidden;
    padding: 10rpx 0;
    font-size: 28rpx;
    color: #000000;
    background: #ffffff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;

    .refund-reason {
      padding: 24rpx 24rpx;

      .label {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
      }

      .value {
        padding-left: 40rpx;
        flex: 1;
        overflow: hidden;

        .value-text {
          flex: 1;
          overflow: hidden;
          text-align: right;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
        }

        image {
          margin-left: 24rpx;
          width: 13rpx;
          height: 24rpx;
        }
      }
    }

    .refund-money {
      // padding: 24rpx 24rpx;
      width: 100%;
      overflow: hidden;
      padding: 0rpx 24rpx;

      .label {
        min-width: 200rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
      }

      .label-tip {
        // flex: 1;
        // overflow: hidden;
        width: fit-content;
        // min-width: 200rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #9695a3;
      }

      .value {
        flex: 1;
        overflow: hidden;
        padding-left: 20rpx;
        justify-content: flex-end;

        .huobi {
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
        }

        .input-box {
          display: inline-flex;
          height: 100rpx;
          width: fit-content;
        }

        .input {
          margin: 0 20rpx;
          // padding: 0 20rpx;
          display: inline-flex;
          justify-content: center;
          text-align: center;
          width: min-content;
          min-width: 100rpx;
          //
          height: 100rpx;
          line-height: 100rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
        }

        .input-p {
          display: inline-flex;
          justify-content: center;
          text-align: center;
          width: min-content;
          min-width: 100rpx;
          //
          height: 100rpx;
          line-height: 100rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #999999;
        }

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
}

.addr-wrap {
  padding: 24rpx;
  // padding-right: 0;

  .addr-item {
    background: #ffffff;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
  }

  .addr-inner {
    margin: 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // padding-bottom: 36rpx;

    .addr-left {
      display: flex;
      align-items: center;
      flex: 1;
      overflow: hidden;
      padding-right: 20rpx;
      padding-right: 10rpx;

      .icon-box {
        width: 202upx;
        height: 202upx;

        image {
          width: 202upx;
          height: 202upx;
        }
      }

      .ico-dai {
        padding: 24rpx;

        .xing {
          width: 56rpx;
          height: 56rpx;
          background: #4d9efa;
          font-size: 28rpx;
          font-weight: bold;
          color: #ffffff;

          text-align: center;
          border-radius: 50%;
        }
      }

      .user-info {
        .name {
          font-size: 28rpx;
          font-weight: bold;
          color: #000000;
          margin-right: 24rpx;
        }

        .phone {
          font-size: 28rpx;
          color: #333333;
          margin-right: 32rpx;
        }

        .desc {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #cb0011;
        }
      }

      .address-info {
        font-size: 24rpx;
        margin-right: 0;
        margin-top: 12rpx;

        view {
          margin-top: 6rpx;
        }
      }

      .addr-empty {
        font-size: 28rpx;
        color: #000000;
      }
    }

    .addr-right {
      align-self: stretch;
      min-width: 72rpx;

      image {
        margin-left: 24rpx;
        width: 14rpx;
        height: 24rpx;
      }
    }
  }
}

// 退货退款
.return-info {
  .store-address {
    background: #ffffff;
    // box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.06);
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    padding: 34rpx 24rpx 22rpx;
    margin-top: 16rpx;

    .tui-type {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
    }

    .address {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      margin-top: 32rpx;

      .right {
        flex: 1;
        overflow: hidden;
        padding-left: 20rpx;
        display: flex;
        align-items: center;
        text-align: right;

        .address-info {
          .title {
            font-size: 28rpx;
            color: #000000;
          }

          .user {
            font-size: 28rpx;
            color: #9695a3;
            text-align: right;
          }
        }

        image {
          width: 13rpx;
          height: 24rpx;
        }
      }
    }
  }
}

.page-foot {
  padding: 16upx 32upx;
  .p-tip {
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
    .p-y {
      font-weight: bold;
      font-size: 28rpx;
      color: #f49c0d;
      margin-left: 16upx;
    }
    .arr {
      width: 24rpx;
      height: 13rpx;
      margin-right: 16upx;
    }
  }
  .btn {
    margin-top: 24upx;
    // width: 345rpx;
    height: 80rpx;
    background: #f49c0d;
    border-radius: 64rpx 64rpx 64rpx 64rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
  }
}
.q-pop {
  &-box {
    width: 100%;
    max-height: 600upx;
    background: #f6f6f6;
    //border-radius: 32rpx 32rpx 0rpx 0rpx;
    padding: 22upx 0 0;
    box-sizing: border-box;
    .q-t {
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      text-align: center;
      margin-bottom: 38upx;
    }
    .q-wrap {
      padding: 0 32upx;
    }
  }
}
</style>
